<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        div {
            width: 750px;
            margin: 0 auto;
        }

        ul {
            display: flex;
        }

        ul>li {
            width: 70px;
            height: 250px;
            overflow: hidden;
            transition: width .2s linear;
        }

        img {
            display: block;
            width: 400px;
            height: 250px;
        }

        ol {
            display: flex;
        }

        ol>li {
            width: 10px;
            height: 10px;
            margin: 10px;
            background-color: aquamarine;
        }

        ol>li:first-child {
            background-color: red;
        }

    </style>
</head>

<body>
    <div>
        <ul>
            <li><img src="./img/小姐姐1.jpeg" alt=""></li>
            <li><img src="./img/小姐姐2.jpeg" alt=""></li>
            <li><img src="./img/小姐姐3.jpeg" alt=""></li>
            <li><img src="./img/小姐姐4.jpeg" alt=""></li>
            <li><img src="./img/小姐姐5.jpeg" alt=""></li>
            <li><img src="./img/小姐姐6.jpeg" alt=""></li>
        </ul>
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>

    <script>
        var lis = document.querySelector('ul').querySelectorAll('li');
        var lis1 = document.querySelector('ol').querySelectorAll('li');
         // 2.给第一个li设置初始样式
        lis[0].style.width = "400px";
       
      // 3.循环得到每个li标签
        for (var i = 0; i < lis.length; i++) {
           // console.log(i); //0-5
            // 10.给每个li添加一个自定义属性 属性的值是当前标签的索引值
            // 这样只要可以获取一个标签 就可以获取这个标签的索引值
            lis[i].aaa = i;
              // 4.给每个li添加点击事件
            lis[i].onmouseenter = function () {
                 // console.log(i); //6

                // 5.使用排他思想; 先给所以的标签都设置取消特殊样式
                for (var j = 0; j < lis.length; j++) {
                     // 5.1设置取消样式 性能    
                    lis[j].style.width = '70px'
                     // 8.先取消所有小方块的特殊样式(小方块的数量索引值与li带图的是一样的,所以可以使用同一个循环)
                    // 9? 如何获取当前点击的li(带图的) 的索引值
                    lis1[j].style.backgroundColor = 'rgb(231, 173, 173)'
                }
                 // 11.通过当前标签this 获取自定义属性aaa的值 也就是记录的当前标签的索引值
                 console.log(this.aaa); //
                // 6.给当前标签添加特殊样式
                this.style.width = '400px'
                  // 12.根据获取的索引值找到相对应位置的小方块的li设置特殊样式
                lis1[this.aaa].style.backgroundColor = 'red'
            }
        }


    </script>
</body>

</html>